// createRouter              创建路由实例的函数
// createWebHashHistory      创建哈希Hash路由函数(推荐)
// createWebHistory          创建History路由函数
import { createRouter, createWebHashHistory } from 'vue-router'

import Layout from '@/views/Layout.vue'
import Home from '@/views/home/index.vue'
import store from '@/store'

// 路由：路径和组件映射关系
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '/', component: Home },
      { path: 'category/:id', component: () => import('@/views/category/index.vue') },
      { path: 'category/sub/:id', component: () => import('@/views/category/sub.vue') },
      { path: 'product/:id', component: () => import('@/views/goods/index.vue') },
      { path: 'cart', component: () => import('@/views/cart/index.vue') },
      { path: 'member/checkout', component: () => import('@/views/member/pay/checkout.vue') }
    ]
  },
  { path: '/login', component: () => import('@/views/login/index.vue') },
  { path: '/login/callback', component: () => import('@/views/login/callback.vue') }
]

// 创建路由实例
const router = createRouter({
  // 哈希路由
  history: createWebHashHistory(),
  // 路由映射配置
  routes,
  // 滚动行为 https://next.router.vuejs.org/zh/guide/advanced/scroll-behavior.html
  scrollBehavior(to, from, savedPosition) {
    // 如果是首页
    if (to.path === '/') {
      // 保留原来的位置
      return savedPosition
    } else {
      // 其他页面，始终滚动到顶部
      // 💥 vue2的配置和Vue3有差别：x 改名为 left，y 改名为 top
      return { top: 0, behavior: 'smooth' }
    }
  }
})

// 前置导航守卫
// to      去哪里
// from    从哪里来
// next    放行函数（可选参数）
router.beforeEach((to, from) => {
  // 已 /member 开头的都需要登录后才能访问
  if (to.path.startsWith('/member') && !store.state.user.profile.token) {
    // 针对腾讯回跳的解决方案
    store.commit('user/setRedirectUrl', to.fullPath)
    // 新版 Vue Router 可通过 return 跳转页面
    return '/login?redirectUrl=' + to.fullPath
  }
})

// 导出路由实例
export default router
